<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center platformMessage_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub platformMessage_fd0_0'>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c0'
					@tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  platformMessage_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='platformMessage_fd0_0_c1_c0'>{{title}}</text>
				</view>
				<view class='flex flex-wrap align-center platformMessage_fd0_0_c1' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/print/speech?id=${aid}&type=1`">
					<text>蓝牙打印</text>
				</view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="see_word" v-if="is_click">
				<view class="see_word_left" @tap.stop="clickWord">
					<rich-text v-if="clickNum == 0" :nodes="activeWord"></rich-text>
					<rich-text class="select_word" v-if="clickNum == 1 || clickNum == 2" :nodes="activeWord"></rich-text>
					<rich-text style="opacity: 0;color: #fff;" v-if="clickNum == 3" :nodes="activeWord"></rich-text>
					<!-- <image v-if="clickNum == 1" class="see_img" :src='STATIC_URL+"40.png"' mode="aspectFill">
					</image> -->
					<text v-if="clickNum == 2" class="select_word_explain">{{decode}}</text>
				</view>
			</view>
			<view v-if="is_click" style="height: 95rpx;"></view>
			
			<view class="list">
				<template v-for="(item, index) in paragraph_data">
					<template v-if="item.is_learned == 2">
						<view class="list_item" :class="item.is_audio == 1 ? 'list_item1' : ''" :key="index">
							<view class="list_index">{{index + 1}}</view>
							<!-- <view class="list_index list_index1">2</view> -->
							<view class="item_view">
								<view class="word_item" :class="item.is_play ? 'word_opcity' : ''">
									<text v-for="(v, k) in item.word_info" :key="k">
										<text :class="(one_index == index && two_index == k) ? 'active_item_text': 'word_item_text'" @tap.stop="selectWord(v.word, index, k)">{{v.word}}</text>
									</text>
									<!-- <text class="word_learned">between</text>
									<text class="word_err">not</text> -->
								</view>
								<view class="chinese">
									{{item.translate}}
								</view>
								<view class="item_btn">
									<template v-if="!item.is_play">
										<view v-if="!item.paragraph_play" class="item_btn_1" @tap.stop="playAudio(index)">
											<image :src='STATIC_URL+"63.png"' mode="aspectFill"></image>
											<text>播放录音</text>
										</view>
										<view v-if="item.paragraph_play" class="item_btn_2">
											<image :src='STATIC_URL+"98.png"' mode="aspectFill"></image>
											<text>录音播放中...</text>
										</view>
									</template>
									<template v-else>
										<view class="item_btn_3" @tap.stop="trainEnded(index)">
											<image :src='STATIC_URL+"99.png"' mode="aspectFill"></image>
											<text>该句子已训练，可继续训练</text>
										</view>
									</template>
								</view>
							</view>
						</view>
					</template>
					<template v-if="item.is_learned == 1">
						<view class="list_item list_item2">
							<view class="list_index list_index2">{{index + 1}}</view>
							<view class="item_view">
								<view class="word_item" v-if="!item.show_click">
									<text v-for="(v, k) in item.word_info" :key="k">
										<text :class="(one_index == index && two_index == k) ? 'active_item_text': 'word_item_text'" @tap.stop="selectWord(v.word, index, k)">{{v.word}}</text>
									</text>
								</view>
								<view style="opacity: 0;" class="word_item" v-else>
									<text v-for="(v, k) in item.word_info" :key="k">
										<text :class="(one_index == index && two_index == k) ? 'active_item_text': 'word_item_text'">{{v.word}}</text>
									</text>
								</view>
								<view class="chinese" @tap.stop="selectChinese(index)">
									{{item.translate}}
								</view>
								<view class="item_btn">
									<template v-if="!item.is_play">
										<view v-if="!item.paragraph_play" class="item_btn_1" @tap.stop="playAudio(index)">
											<image :src='STATIC_URL+"63.png"' mode="aspectFill"></image>
											<text>播放录音</text>
										</view>
										<view v-if="item.paragraph_play" class="item_btn_2">
											<image :src='STATIC_URL+"98.png"' mode="aspectFill"></image>
											<text>录音播放中...</text>
										</view>
									</template>
									<template v-else>
										<view class="item_btn_3" @tap.stop="trainEnded(index)">
											<image :src='STATIC_URL+"99.png"' mode="aspectFill"></image>
											<text>该句子已训练，可继续训练</text>
										</view>
									</template>
								</view>
							</view>
						</view>
					</template>
				</template>
				
				<!-- <view class="list_item list_item1">
					<view class="list_index list_index1">2</view>
					<view class="item_view">
						<view class="word_item">
							<text class="word_item_text" v-for="(v, k) in 3">
								furthest
							</text>
							<text class="active_item_text">between</text>
							<text class="word_learned">between</text>
							<text class="word_err">not</text>
						</view>
						<view class="chinese">
							这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是句子的中文翻译这里是
						</view>
						<view class="item_btn">
							<view class="item_btn_2">
								<image :src='STATIC_URL+"98.png"' mode="aspectFill"></image>
								<text>录音播放中...</text>
							</view>
						</view>
					</view>
				</view> -->
				
			</view>
		</template>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	import {highlightedText} from "@/common/utils/utils.js"
	export default {
		components: {},


		data() {
			return {
				"aid": "",  // 演讲背诵id
				"title": "",
				"detailsInfo": {},
				"paragraph_data": [],
				"isShow": true,
				
				"one_index": -1,
				"two_index": -1,
				"paragraph_index": -1,
				"innerAudioContext": null,
				"languageType": 1,
				"grasp_num": 0, // 会的单词数量
				"not_num": 0, // 不会的单词数量
				"is_click": false,
				"clickNum": 0, // 单词点击次数
				"activeWord": "",
				"wordlist_info": [], // 选择的列表
				"decode": "", // 单词翻译
				"paragraph_play_status": false,  // 是否有段落在播放
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let { aid,title } = options;
			if (aid !== undefined) this.aid = aid;
			if (title !== undefined) this.title = title;
			this.getDetails();
		},
		onUnload() {

		},
		onReady() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		onShow() {
			this.languageType = uni.getStorageSync('languageType');
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getDetails() {
				this.$api.post(global.apiUrls.post6566e5b7d3250, {
					speechrecitation_id: this.aid
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.paragraph_data = res.data.data;
						if (this.paragraph_data.length > 0) {
							this.paragraph_data.forEach((v, k) => {
								v.is_play = false;
								v.paragraph_play = false;
								v.is_audio = 2;
								v.show_click = false;
							})
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 播放段落语音
			playAudio(index) {
				this.is_click = false;
				this.paragraph_index = index;
				this.paragraph_data.forEach((v, k) => {
					v.is_play = false;
					v.paragraph_play = false;
					v.is_audio = 2;
				})
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.paragraph_data[index].american_accent.path;
				} else {
					this.innerAudioContext.src = this.paragraph_data[index].british_accent.path;
				}
				
				this.innerAudioContext.onPlay(() => {
					this.paragraph_data[index].paragraph_play = true;
					this.paragraph_data[index].is_audio = 1;
					this.paragraph_play_status = true;
					this.$forceUpdate();
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
					this.$message.info('播放失败，请稍后再试');
					this.paragraph_data[index].paragraph_play = false;
					this.paragraph_data[index].is_audio = 2;
					this.paragraph_play_status = false;
					this.$forceUpdate();
				});
				this.innerAudioContext.onEnded(() => {
					this.paragraph_data[index].paragraph_play = false;
					this.paragraph_data[index].is_play = true;
					this.paragraph_play_status = false;
					this.$forceUpdate();
				})
			},
			trainEnded(index) {
				this.paragraph_data[index].is_learned = 1;
				this.paragraph_data[index].is_play = false;
				this.$forceUpdate();
				this.submit();
			},
			// 提交学习记录  post65685981cc71e
			submit() {
				this.$api.post(global.apiUrls.post65685981cc71e, {
					speechrecitationparagraph_id: this.paragraph_data[this.paragraph_index].aid
				}).then(res => {
					if (res.data.code == 1) {
						this.paragraph_data[this.paragraph_index].is_learned = 1;
						this.getDetails();
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			
			// 选择的单词
			selectWord(word, index, index1) {
				// if (this.paragraph_data[index].is_learned == 1) return;
				if (this.paragraph_data[index].is_play) return;
				if (this.paragraph_data[index].paragraph_play) return;
				this.one_index = index;
				this.two_index = index1;
				this.activeWord = highlightedText(this.paragraph_data[this.one_index].word_info[this.two_index].word, this.paragraph_data[this.one_index].word_info[this.two_index].syllable);
				this.is_click = true;
				this.clickNum = 0;
				this.$forceUpdate();
			},
			// 单词点击次数
			clickWord() {
				if (this.paragraph_play_status) return;
				this.clickNum += 1;
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.paragraph_data[this.one_index].word_info[this.two_index]
						.american_accent;
				} else {
					this.innerAudioContext.src = this.paragraph_data[this.one_index].word_info[this.two_index]
						.british_accent;
				}
							
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					this.$message.info('播放失败，请重试');
					this.clickNum = this.clickNum - 1;
					console.log(res.errMsg);
					console.log(res.errCode);
				});
				if (this.clickNum == 2) {
					this.decode = this.paragraph_data[this.one_index].word_info[this.two_index].c_word;
				}
				if (this.clickNum == 4) {
					this.clickNum = 1;
				}
			},
			// 点击中文
			selectChinese(index) {
				if (this.innerAudioContext) {
					this.innerAudioContext.destroy();
				}
				this.innerAudioContext = null;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				if (this.languageType == 1) {
					this.innerAudioContext.src = this.paragraph_data[index].american_accent.path;
				} else {
					this.innerAudioContext.src = this.paragraph_data[index].british_accent.path;
				}
				
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
					this.$message.info('播放失败，请稍后再试');
					
					return;
				});
				this.paragraph_data[index].show_click = !this.paragraph_data[index].show_click;
				this.$forceUpdate();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.list {
		padding: 0 25rpx 25rpx;
		.list_item {
			background: #fff;
			border-radius: 10rpx;
			padding: 0rpx 20rpx 20rpx 0;
			margin-top: 15rpx;
			display: flex;
			.list_index {
				width: 28rpx;
				height: 25rpx;
				background: #f8f8f8;
				border-radius: 0rpx 13rpx 13rpx 0rpx;
				font-size: 13rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #666666;
				line-height: 25rpx;
				text-align: center;
				margin-top: 14rpx;
			}
			.item_view {
				width: calc(100% - 28rpx);
				padding-left: 25rpx;
				.word_item {
					padding: 13rpx 0;
					line-height: 30rpx;
					overflow: hidden;
					word-break: keep-all;
					.word_item_text {
						float: left;
						padding: 5rpx 10rpx;
						font-size: 25rpx;
					}
					.active_item_text {
						background: #E0ECFF;
						float: left;
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
						font-size: 25rpx;
					}
					.word_learned {
						float: left;
						padding: 5rpx 10rpx;
						font-size: 25rpx;
						color: #4DC777;
						opacity: 0.2;
					}
					.word_err {
						float: left;
						padding: 5rpx 10rpx;
						font-size: 25rpx;
						color: #FA3B3D;
						opacity: 1;
					}
				}
				.word_opcity {
					opacity: 0;
				}
				.chinese {
					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 26rpx;
				}
				.item_btn {
					margin-top: 15rpx;
					display: flex;
				
					.item_btn_1 {
						color: #4087FD;
						font-size: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						// width: 115rpx;
						padding: 5rpx 15rpx;
						background: #F0F6FF;
						border-radius: 15rpx;
				
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
							transform: translateY(2rpx);
						}
					}
				
					.item_btn_2 {
						color: #fff;
						font-size: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 5rpx 15rpx;
						background: #4087FD;
						border-radius: 15rpx;
				
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
							transform: translateY(2rpx);
						}
					}
					.item_btn_3 {
						color: #fff;
						font-size: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 5rpx 15rpx;
						background: #4DC777;
						border-radius: 15rpx;
										
						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 5rpx;
							transform: translateY(2rpx);
						}
					}
				}
			}
		}
		.list_item1 {
			background: #F0F6FF;
			.list_index1 {
				background: #ffffff;
				color: #4087FD;
			}
		}
		.list_item2 {
			background: #E2F6E9;
			.list_index2 {
				background: #f8f8f8;
				color: #666666;
			}
		}
	}
	.btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 0 25rpx 35rpx;
		.btn_view {
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			color: #fff;
			font-size: 25rpx;
			background: #4087FD;
			border-radius: 34px 34px 34px 34px;
		}
	}
	.see_word {
		width: 100%;
		background: #f8f8f8;
		padding: 15rpx 25rpx 0;
		position: fixed;
		left: 0;
		z-index: 10;
		.see_word_left {
			height: 80rpx;
			padding: 0 20rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			// font-weight: bold;
			color: #333333;
			display: flex;align-items: center;
		}
		.select_word_explain {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			// color: #999;
			color: #333;
			margin-left: 90rpx;
		}
		.select_word {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			// color: #4087FD;
		}
		.see_img {
			width: 25rpx;
			height: 25rpx;
			margin-left: 13rpx;
		}
		.see_word_right {
			display: flex;
			flex-wrap: wrap;
			justify-self: self-end;
			.see_right_item {
				display: flex;
				align-items: center;
				font-size: 18rpx;
				color: #333;
				margin-left: 40rpx;
				image {
					width: 23rpx;
					height: 23rpx;
					margin-right: 10rpx;
				}
			}
		}
		.unbind {
			.unbind_1 {
				width: 101rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				background: #F0F6FF;
				border-radius: 5rpx;
				color: #4087FD;
				font-size: 15rpx;
				margin: 0 0 0 auto;
			}
			.unbind_2 {
				text-align: right;
				font-size: 13rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}
	.word {
		margin: 15rpx 25rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 13rpx 20rpx;
		.word_item {
			padding: 13rpx 0;
			line-height: 30rpx;
			overflow: hidden;
			word-break: keep-all;
			.word_item_text {
				float: left;
				// margin-right: 16rpx;
				padding: 2rpx 10rpx;
				font-size: 25rpx;
			}
			.word_learned {
				float: left;
				// margin-right: 16rpx;
				padding: 2rpx 10rpx;
				font-size: 25rpx;
				color: #4DC777;
			}
		}
	}
	.content_img {
		width: 100%;
		height: 219rpx;
		margin-top: 20rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.platformMessage_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.platformMessage_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
	}

	.platformMessage_fd0_0_c0_c0 {
		font-size: 25rpx;
		color: #333;
	}

	.platformMessage_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}
	// .platformMessage_fd0_0_c0 {
	// 	width: 100rpx;
	// 	font-size: 20rpx;
	// 	color: #333333;
	// }

	.platformMessage_fd0_0 {
		padding: 0rpx 25rpx 0rpx 25rpx;
	}

	.platformMessage_fd1_0_c2 {
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 25rpx;
	}

	.platformMessage_fd1_0_c1 {
		margin: 10rpx 0rpx 0rpx 0rpx;
		font-size: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 26rpx;
		// -webkit-line-clamp: 2;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0_c0 {
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		// line-height: 45rpx;
		// -webkit-line-clamp: 1;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	.platformMessage_fd1_0 {
		// background: #fff;
		width: 100%;
		padding: 20rpx 25rpx 20rpx 25rpx;
		border-bottom: 1px solid #eee;
	}
</style>